import React, { Component } from 'react'
// React的事件处理其实就是  小驼峰式的事件 = { 函数 }
// 同时也要注意 this 指向
export default class App extends Component {
  state = {
    userName: '',
    password: '',
    age: '',
    city: ''
  }
  constructor (props) {
    super(props)
    this.changeCity = this.changeCity.bind(this)
  }

  changePassword = (event) => {
    this.setState({
      password: event.target.value
    })
  }
  changeAge (event) {
    this.setState({
      age: event.target.value
    })
  }
  changeCity (event) {
    this.setState({
      city: event.target.value
    })
  }
  render() {
    console.log(this)
    return (
      <div>
        <input 
          type="text" 
          value = { this.state.userName }
          onChange = { (event) => {
            this.setState({
              userName: event.target.value
            })
          }}
          placeholder="userName" /> { this.state.userName } <br/>
          <input 
          type="text" 
          value = { this.state.password }
          onChange = { this.changePassword }
          placeholder="password" /> { this.state.password } <br/>
          <input 
          type="number" 
          value = { this.state.age }
          onChange = { this.changeAge.bind(this) }
          placeholder="age" /> { this.state.age } <br/>
          <input 
          type="text" 
          value = { this.state.city }
          onChange = { this.changeCity }
          placeholder="city" /> { this.state.city } <br/>
      </div>
    )
  }
}
